<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>企业用户操作 - 社交平台管理</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/css/css/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net.net.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    /* 基础样式 */
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f7fa;
      color: #333;
      margin: 0;
      padding-bottom: 80px;
    }
    
    /* 顶部导航 */
    .top-nav {
      height: 50px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      padding: 0 15px;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0 auto;
    }
    
    .nav-btn {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #666;
      text-decoration: none;
    }
    
    .nav-right {
      display: flex;
    }
    
    /* 样式切换器 */
    .style-switcher {
      background-color: #fff;
      padding: 10px 15px;
      border-bottom: 1px solid #eee;
    }
    
    .style-tabs {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding-bottom: 5px;
    }
    
    .style-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .style-tab {
      padding: 6px 14px;
      background-color: #f5f7fa;
      border-radius: 20px;
      font-size: 14px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .style-tab.active {
      background-color: #1890ff;
      color: white;
    }
    
    /* 通用操作页面样式 */
    .operation-page {
      display: none;
    }
    
    .operation-page.active {
      display: block;
    }
    
    /* 表单容器 */
    .form-container {
      padding: 15px;
      background-color: #fff;
      margin-bottom: 15px;
    }
    
    /* 表单标题 */
    .form-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 15px;
      padding-bottom: 10px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    /* 表单组样式 */
    .form-group {
      margin-bottom: 15px;
    }
    
    .form-label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 500;
      color: #333;
    }
    
    .form-control {
      width: 100%;
      padding: 10px 12px;
      border-radius: 6px;
      border: 1px solid #ddd;
      font-size: 14px;
      box-sizing: border-box;
    }
    
    .form-control:focus {
      outline: none;
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
    }
    
    /* 文本区域 */
    textarea.form-control {
      min-height: 100px;
      resize: vertical;
      line-height: 1.5;
    }
    
    /* 上传区域 */
    .upload-area {
      border: 1px dashed #ddd;
      border-radius: 6px;
      padding: 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;
    }
    
    .upload-area:hover {
      border-color: #1890ff;
    }
    
    .upload-icon {
      font-size: 24px;
      color: #999;
      margin-bottom: 8px;
    }
    
    .upload-text {
      font-size: 14px;
      color: #666;
    }
    
    .upload-hint {
      font-size: 12px;
      color: #999;
      margin-top: 8px;
    }
    
    /* 图片预览 */
    .image-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 10px;
    }
    
    .preview-item {
      width: 80px;
      height: 80px;
      border-radius: 4px;
      overflow: hidden;
      position: relative;
    }
    
    .preview-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .preview-remove {
      position: absolute;
      top: -5px;
      right: -5px;
      width: 20px;
      height: 20px;
      background-color: #ff4d4f;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      cursor: pointer;
    }
    
    /* 选项组 */
    .options-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 5px;
    }
    
    .option-item {
      padding: 6px 15px;
      border-radius: 20px;
      border: 1px solid #ddd;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
    }
    
    .option-item.selected {
      border-color: #1890ff;
      background-color: #e6f7ff;
      color: #1890ff;
    }
    
    /* 信息提示 */
    .info-hint {
      background-color: #f5f7fa;
      padding: 12px 15px;
      border-radius: 6px;
      font-size: 13px;
      color: #666;
      margin-bottom: 15px;
      line-height: 1.5;
    }
    
    .info-hint i {
      color: #1890ff;
      margin-right: 5px;
    }
    
    /* 审核信息区域 */
    .review-section {
      background-color: #fff8f0;
      border-left: 3px solid #faad14;
      padding: 12px 15px;
      border-radius: 0 6px 6px 0;
      margin-bottom: 15px;
    }
    
    .review-title {
      font-weight: 600;
      font-size: 14px;
      margin-bottom: 5px;
      color: #fa8c16;
    }
    
    .review-content {
      font-size: 13px;
      color: #666;
      line-height: 1.5;
    }
    
    /* 操作按钮区域 */
    .action-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #fff;
      border-top: 1px solid #eee;
      padding: 10px 15px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      z-index: 90;
    }
    
    .action-btn {
      padding: 10px 0;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 500;
      cursor: pointer;
      flex: 1;
      text-align: center;
      border: none;
    }
    
    .btn-cancel {
      background-color: #f5f5f5;
      color: #666;
    }
    
    .btn-primary {
      background-color: #1890ff;
      color: white;
    }
    
    .btn-danger {
      background-color: #ff4d4f;
      color: white;
    }
    
    /* 样式1 - 标准表单布局 */
    .standard-form .form-section {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .standard-form .section-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 12px;
      color: #1890ff;
      display: flex;
      align-items: center;
    }
    
    .standard-form .section-title i {
      margin-right: 5px;
      font-size: 14px;
    }
    
    .standard-form .form-hint {
      font-size: 12px;
      color: #999;
      margin-top: 5px;
    }
    
    /* 样式2 - 简约表单布局 */
    .simple-form .form-container {
      padding: 12px 15px;
      margin-bottom: 0;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .simple-form .form-group {
      margin-bottom: 12px;
    }
    
    .simple-form .form-label {
      font-size: 13px;
      margin-bottom: 4px;
    }
    
    .simple-form .form-control {
      padding: 8px 12px;
      font-size: 13px;
    }
    
    .simple-form .action-btn {
      padding: 8px 0;
      font-size: 15px;
    }
    
    /* 样式3 - 卡片表单布局 */
    .card-form .form-card {
      background-color: #fff;
      border-radius: 12px;
      padding: 20px;
      margin: 15px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .card-form .form-title {
      font-size: 17px;
      margin-bottom: 18px;
    }
    
    .card-form .form-control {
      padding: 12px 15px;
      border-radius: 8px;
      font-size: 15px;
    }
    
    .card-form .action-bar {
      padding: 15px;
    }
    
    .card-form .action-btn {
      padding: 12px 0;
      border-radius: 8px;
      font-size: 17px;
    }
    
    /* 样式4 - 步骤表单布局 */
    .step-form .steps-indicator {
      display: flex;
      padding: 15px;
      background-color: #fff;
      border-bottom: 1px solid #eee;
      margin-bottom: 15px;
    }
    
    .step-form .step-item {
      flex: 1;
      position: relative;
      text-align: center;
    }
    
    .step-form .step-item:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 12px;
      right: -50%;
      width: 100%;
      height: 2px;
      background-color: #eee;
      z-index: 1;
    }
    
    .step-form .step-number {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background-color: #eee;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      margin: 0 auto 5px;
      position: relative;
      z-index: 2;
    }
    
    .step-form .step-item.active .step-number {
      background-color: #1890ff;
      color: white;
    }
    
    .step-form .step-item.completed .step-number {
      background-color: #52c41a;
      color: white;
    }
    
    .step-form .step-item.completed::after {
      background-color: #52c41a;
    }
    
    .step-form .step-title {
      font-size: 12px;
      color: #999;
    }
    
    .step-form .step-item.active .step-title {
      color: #1890ff;
      font-weight: 500;
    }
    
    .step-form .form-step {
      display: none;
    }
    
    .step-form .form-step.active {
      display: block;
    }
    
    .step-form .action-bar {
      justify-content: space-between;
    }
    
    .step-form .prev-btn {
      flex: 0 0 100px;
    }
    
    .step-form .next-btn {
      flex: 0 0 100px;
    }
    
    .step-form .submit-btn {
      flex: 1;
    }
    
    /* 提示框 */
    .toast {
      position: fixed;
      bottom: 80px;
      left: 50%;
      transform: translateX(-50%);
      background-color: rgba(0,0,0,0.8);
      color: white;
      border-radius: 8px;
      padding: 10px 15px;
      font-size: 14px;
      z-index: 1000;
      display: none;
    }
  </style>
</head>
<body>
  <!-- 提示框 -->
  <div class="toast" id="toast"></div>
  
  <!-- 顶部导航 -->
  <nav class="top-nav">
    <a href="#" class="nav-btn" id="backBtn">
      <i class="fa fa-angle-left"></i>
    </a>
    <h1 class="nav-title">企业用户操作</h1>
    <div class="nav-right">
      <a href="#" class="nav-btn" id="helpBtn">
        <i class="fa fa-question-circle"></i>
      </a>
    </div>
  </nav>
  
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="style-tabs">
      <div class="style-tab active" data-style="standard">标准表单</div>
      <div class="style-tab" data-style="simple">简约表单</div>
      <div class="style-tab" data-style="card">卡片表单</div>
      <div class="style-tab" data-style="step">步骤表单</div>
    </div>
  </div>
  
  <!-- 样式1 - 标准表单布局（企业审核） -->
  <div class="operation-page active standard-form" id="standard">
    <div class="form-section">
      <div class="section-title"><i class="fa fa-building"></i> 企业基本信息</div>
      <div class="form-group">
        <label class="form-label">企业名称</label>
        <input type="text" class="form-control" value="未来贸易有限公司" readonly>
      </div>
      <div class="form-group">
        <label class="form-label">企业类型</label>
        <input type="text" class="form-control" value="贸易/零售" readonly>
      </div>
      <div class="form-group">
        <label class="form-label">企业规模</label>
        <input type="text" class="form-control" value="100-500人" readonly>
      </div>
      <div class="form-group">
        <label class="form-label">注册时间</label>
        <input type="text" class="form-control" value="2023-10-22 16:45:30" readonly>
      </div>
    </div>
    
    <div class="form-section">
      <div class="section-title"><i class="fa fa-user"></i> 联系人信息</div>
      <div class="form-group">
        <label class="form-label">联系人姓名</label>
        <input type="text" class="form-control" value="李总监" readonly>
      </div>
      <div class="form-group">
        <label class="form-label">联系电话</label>
        <input type="text" class="form-control" value="139****2345" readonly>
      </div>
      <div class="form-group">
        <label class="form-label">电子邮箱</label>
        <input type="text" class="form-control" value="li@futuretrade.com" readonly>
      </div>
    </div>
    
    <div class="form-section">
      <div class="section-title"><i class="fa fa-file-text"></i> 认证材料</div>
      <div class="form-group">
        <label class="form-label">营业执照</label>
        <div class="image-preview">
          <div class="preview-item">
            <img src="https://picsum.photos/id/20/200/200" alt="营业执照">
            <div class="preview-remove" onclick="showToast('已移除预览图')">×</div>
          </div>
        </div>
        <div class="form-hint">点击图片可查看大图</div>
      </div>
      
      <div class="form-group">
        <label class="form-label">法人身份证</label>
        <div class="image-preview">
          <div class="preview-item">
            <img src="https://picsum.photos/id/21/200/200" alt="身份证正面">
            <div class="preview-remove" onclick="showToast('已移除预览图')">×</div>
          </div>
          <div class="preview-item">
            <img src="https://picsum.photos/id/22/200/200" alt="身份证反面">
            <div class="preview-remove" onclick="showToast('已移除预览图')">×</div>
          </div>
        </div>
      </div>
    </div>
    
    <div class="form-section">
      <div class="section-title"><i class="fa fa-check-circle"></i> 审核操作</div>
      <div class="form-group">
        <label class="form-label">审核结果</label>
        <div class="options-group">
          <div class="option-item selected" onclick="selectOption(this)">通过</div>
          <div class="option-item" onclick="selectOption(this)">拒绝</div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">审核意见</label>
        <textarea class="form-control" placeholder="请输入审核意见..."></textarea>
        <div class="form-hint">审核不通过时，意见将发送给企业用户</div>
      </div>
    </div>
    
    <div class="action-bar">
      <button class="action-btn btn-cancel" onclick="showToast('已取消审核')">取消</button>
      <button class="action-btn btn-danger" onclick="showToast('已拒绝企业认证')">拒绝</button>
      <button class="action-btn btn-primary" onclick="showToast('已通过企业认证')">通过</button>
    </div>
  </div>
  
  <!-- 样式2 - 简约表单布局（编辑企业信息） -->
  <div class="operation-page simple-form" id="simple">
    <div class="form-container">
      <div class="form-group">
        <label class="form-label">企业名称</label>
        <input type="text" class="form-control" value="科技创新有限公司">
      </div>
    </div>
    
    <div class="form-container">
      <div class="form-group">
        <label class="form-label">企业类型</label>
        <div class="options-group">
          <div class="option-item selected" onclick="selectOption(this)">科技/互联网</div>
          <div class="option-item" onclick="selectOption(this)">贸易/零售</div>
          <div class="option-item" onclick="selectOption(this)">金融/投资</div>
          <div class="option-item" onclick="selectOption(this)">医疗/健康</div>
        </div>
      </div>
    </div>
    
    <div class="form-container">
      <div class="form-group">
        <label class="form-label">企业规模</label>
        <div class="options-group">
          <div class="option-item" onclick="selectOption(this)">1-10人</div>
          <div class="option-item" onclick="selectOption(this)">10-50人</div>
          <div class="option-item selected" onclick="selectOption(this)">50-100人</div>
          <div class="option-item" onclick="selectOption(this)">100-500人</div>
        </div>
      </div>
    </div>
    
    <div class="form-container">
      <div class="form-group">
        <label class="form-label">联系人</label>
        <input type="text" class="form-control" value="王经理">
      </div>
    </div>
    
    <div class="form-container">
      <div class="form-group">
        <label class="form-label">联系电话</label>
        <input type="text" class="form-control" value="138****5678">
      </div>
    </div>
    
    <div class="form-container">
      <div class="form-group">
        <label class="form-label">企业地址</label>
        <input type="text" class="form-control" value="北京市海淀区科技园区88号创新大厦12层">
      </div>
    </div>
    
    <div class="form-container">
      <div class="form-group">
        <label class="form-label">企业简介</label>
        <textarea class="form-control" placeholder="请输入企业简介...">专注于人工智能技术研发与应用的高科技企业，成立于2015年，拥有多项专利技术。</textarea>
      </div>
    </div>
    
    <div class="action-bar">
      <button class="action-btn btn-cancel" onclick="showToast('已取消编辑')">取消</button>
      <button class="action-btn btn-primary" onclick="showToast('已保存企业信息')">保存</button>
    </div>
  </div>
  
  <!-- 样式3 - 卡片表单布局（添加新企业） -->
  <div class="operation-page card-form" id="card">
    <div class="form-card">
      <div class="form-title">基本信息</div>
      
      <div class="form-group">
        <label class="form-label">企业名称 <span style="color:#ff4d4f">*</span></label>
        <input type="text" class="form-control" placeholder="请输入企业全称">
      </div>
      
      <div class="form-group">
        <label class="form-label">企业类型 <span style="color:#ff4d4f">*</span></label>
        <div class="options-group">
          <div class="option-item" onclick="selectOption(this)">科技/互联网</div>
          <div class="option-item" onclick="selectOption(this)">贸易/零售</div>
          <div class="option-item" onclick="selectOption(this)">金融/投资</div>
          <div class="option-item" onclick="selectOption(this)">医疗/健康</div>
        </div>
      </div>
      
      <div class="form-group">
        <label class="form-label">企业规模 <span style="color:#ff4d4f">*</span></label>
        <div class="options-group">
          <div class="option-item" onclick="selectOption(this)">1-10人</div>
          <div class="option-item" onclick="selectOption(this)">10-50人</div>
          <div class="option-item" onclick="selectOption(this)">50-100人</div>
          <div class="option-item" onclick="selectOption(this)">100-500人</div>
        </div>
      </div>
    </div>
    
    <div class="form-card">
      <div class="form-title">联系人信息</div>
      
      <div class="form-group">
        <label class="form-label">联系人姓名 <span style="color:#ff4d4f">*</span></label>
        <input type="text" class="form-control" placeholder="请输入联系人姓名">
      </div>
      
      <div class="form-group">
        <label class="form-label">联系电话 <span style="color:#ff4d4f">*</span></label>
        <input type="text" class="form-control" placeholder="请输入联系电话">
      </div>
      
      <div class="form-group">
        <label class="form-label">电子邮箱</label>
        <input type="text" class="form-control" placeholder="请输入电子邮箱">
      </div>
    </div>
    
    <div class="form-card">
      <div class="form-title">企业资料</div>
      
      <div class="form-group">
        <label class="form-label">企业地址</label>
        <input type="text" class="form-control" placeholder="请输入企业详细地址">
      </div>
      
      <div class="form-group">
        <label class="form-label">企业简介</label>
        <textarea class="form-control" placeholder="请输入企业简介..."></textarea>
      </div>
      
      <div class="form-group">
        <label class="form-label">企业logo</label>
        <div class="upload-area" onclick="showToast('已打开文件选择')">
          <div class="upload-icon">
            <i class="fa fa-upload"></i>
          </div>
          <div class="upload-text">点击上传企业logo</div>
          <div class="upload-hint">支持JPG、PNG格式，建议尺寸200x200px</div>
        </div>
      </div>
    </div>
    
    <div class="info-hint">
      <i class="fa fa-info-circle"></i> 标有 <span style="color:#ff4d4f">*</span> 的为必填项，企业添加后需经过审核才能正常使用
    </div>
    
    <div class="action-bar">
      <button class="action-btn btn-cancel" onclick="showToast('已取消添加')">取消</button>
      <button class="action-btn btn-primary" onclick="showToast('企业添加成功，等待审核')">添加企业</button>
    </div>
  </div>
  
  <!-- 样式4 - 步骤表单布局（企业认证流程） -->
  <div class="operation-page step-form" id="step">
    <div class="steps-indicator">
      <div class="step-item completed">
        <div class="step-number">1</div>
        <div class="step-title">基本信息</div>
      </div>
      <div class="step-item active">
        <div class="step-number">2</div>
        <div class="step-title">资质上传</div>
      </div>
      <div class="step-item">
        <div class="step-number">3</div>
        <div class="step-title">审核确认</div>
      </div>
    </div>
    
    <!-- 步骤2：资质上传 -->
    <div class="form-step active">
      <div class="form-container">
        <div class="form-title">上传认证材料</div>
        
        <div class="form-group">
          <label class="form-label">营业执照 <span style="color:#ff4d4f">*</span></label>
          <div class="upload-area" onclick="showToast('已打开文件选择')">
            <div class="upload-icon">
              <i class="fa fa-upload"></i>
            </div>
            <div class="upload-text">点击上传营业执照照片</div>
            <div class="upload-hint">需清晰拍摄执照正副本，支持JPG、PNG格式</div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">法人身份证 <span style="color:#ff4d4f">*</span></label>
          <div class="upload-area" onclick="showToast('已打开文件选择')">
            <div class="upload-icon">
              <i class="fa fa-upload"></i>
            </div>
            <div class="upload-text">点击上传身份证正反面</div>
            <div class="upload-hint">需清晰拍摄，身份证信息需完整可见</div>
          </div>
        </div>
        
        <div class="form-group">
          <label class="form-label">企业对公账户证明</label>
          <div class="upload-area" onclick="showToast('已打开文件选择')">
            <div class="upload-icon">
              <i class="fa fa-upload"></i>
            </div>
            <div class="upload-text">点击上传账户证明（可选）</div>
            <div class="upload-hint">可加快审核速度，提高认证可信度</div>
          </div>
        </div>
        
        <div class="review-section">
          <div class="review-title">认证提示</div>
          <div class="review-content">
            1. 所有上传的证件必须真实有效，请勿上传伪造或过期证件<br>
            2. 审核周期通常为1-3个工作日，请耐心等待<br>
            3. 如有疑问，请联系客服热线：400-123-4567
          </div>
        </div>
      </div>
      
      <div class="action-bar">
        <button class="action-btn btn-cancel prev-btn" onclick="showToast('已返回上一步')">上一步</button>
        <button class="action-btn btn-primary next-btn" onclick="showToast('已进入下一步')">下一步</button>
      </div>
    </div>
    
    <!-- 操作按钮区域（固定在底部） -->
    <div class="action-bar" style="display:none">
      <button class="action-btn btn-cancel" onclick="showToast('已取消')">取消</button>
      <button class="action-btn btn-primary" onclick="showToast('已提交')">提交</button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 获取元素
    const styleTabs = document.querySelectorAll('.style-tab');
    const operationPages = document.querySelectorAll('.operation-page');
    const backBtn = document.getElementById('backBtn');
    const helpBtn = document.getElementById('helpBtn');
    const toast = document.getElementById('toast');
    
    // 样式切换
    styleTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        // 移除所有激活状态
        styleTabs.forEach(t => t.classList.remove('active'));
        operationPages.forEach(page => page.classList.remove('active'));
        
        // 设置当前激活状态
        this.classList.add('active');
        const style = this.getAttribute('data-style');
        document.getElementById(style).classList.add('active');
        
        showToast(`已切换到${this.textContent}`);
      });
    });
    
    // 返回按钮
    backBtn.addEventListener('click', function() {
      showToast('返回企业用户列表');
    });
    
    // 帮助按钮
    helpBtn.addEventListener('click', function() {
      showToast('查看操作帮助');
    });
    
    // 选项选择
    function selectOption(element) {
      // 获取兄弟元素并移除选中状态
      const siblings = element.parentElement.querySelectorAll('.option-item');
      siblings.forEach(item => item.classList.remove('selected'));
      
      // 设置当前元素为选中状态
      element.classList.add('selected');
      
      showToast(`已选择：${element.textContent}`);
    }
    
    // 显示提示
    function showToast(message) {
      toast.textContent = message;
      toast.style.display = 'block';
      
      setTimeout(() => {
        toast.style.opacity = '0';
        setTimeout(() => {
          toast.style.display = 'none';
          toast.style.opacity = '1';
        }, 300);
      }, 2000);
    }
  </script>
</body>
</html>
